<template>
  <div class="layout kawaii-layout">
    <!-- 二次元背景元素 - 只在首页显示 -->
    <div class="kawaii-background" v-if="isHomePage">
      <div class="stars"></div>
      <div class="clouds"></div>
      <div class="sakura-container">
        <div
          v-for="n in 16"
          :key="n"
          class="sakura"
          :style="{
            animationDelay: `${Math.random() * 10}s`,
            left: `${Math.random() * 100}%`,
            animationDuration: `${15 + Math.random() * 15}s`,
            width: `${10 + Math.random() * 15}px`,
            height: `${10 + Math.random() * 15}px`,
            opacity: `${0.5 + Math.random() * 0.5}`,
          }"
        ></div>
      </div>
      <div class="floating-mascots">
        <div class="floating-mascot left" data-speed="0.05">
          <img src="@/assets/icons/bilibili.svg" alt="可爱角色" />
        </div>
        <div class="floating-mascot right" data-speed="0.03">
          <img src="@/assets/icons/bilibili.svg" alt="可爱角色" />
        </div>
        <div class="kawaii-character bottom-left">
          <div class="kawaii-head"></div>
        </div>
        <div class="kawaii-character bottom-right">
          <div class="kawaii-head"></div>
        </div>
      </div>
    </div>

    <!-- 装饰元素 - 只在首页显示 -->
    <div class="kawaii-decorations" v-if="isHomePage">
      <div class="corner-decoration top-left"></div>
      <div class="corner-decoration top-right"></div>
      <div class="corner-decoration bottom-left"></div>
      <div class="corner-decoration bottom-right"></div>
      <div class="ribbon top-center"></div>
      <div class="bubble bubble-1"></div>
      <div class="bubble bubble-2"></div>
      <div class="bubble bubble-3"></div>
    </div>

    <!-- 头部导航 -->
    <div class="header-fixed" v-if="!showFixedHeader">
      <LayoutHeader :hide-search="isSearchPage" />
    </div>
    <div class="header">
      <LayoutHeader :hide-search="isSearchPage" />
    </div>

    <!-- 内容区域 -->
    <div
      class="content-wrapper"
      :class="{
        'homepage-content': isHomePage,
        'other-page-content': !isHomePage,
      }"
    >
      <div class="content-header" v-if="isHomePage">
        <div class="content-header-decoration left"></div>
        <div class="content-header-title">二次元小窝</div>
        <div class="content-header-decoration right"></div>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>

    <!-- 回到顶部按钮 -->
    <div class="back-to-top" v-show="showBackToTop" @click="scrollToTop">
      <div class="back-to-top-icon">↑</div>
      <div class="back-to-top-text">返回顶部</div>
    </div>

    <!-- 侧边装饰 - 只在首页显示 -->
    <div class="side-decorations" v-if="isHomePage">
      <div class="side-item side-item-1">
        <div class="side-icon heart"></div>
      </div>
      <div class="side-item side-item-2">
        <div class="side-icon star"></div>
      </div>
      <div class="side-item side-item-3">
        <div class="side-icon cat"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue'
import LayoutHeader from '@/components/LayoutHeader.vue'
import { useRoute } from 'vue-router'
// 获取当前路由
const route = useRoute()

//显示固定顶部
const showFixedHeader = ref(false)
const showBackToTop = ref(false)

// 判断当前是否在首页
const isHomePage = computed(() => route.path === '/front/home')

// 判断当前是否在搜索页面
const isSearchPage = computed(() => route.path.includes('/front/search'))

// 判断当前是否在个人中心页面

// 视差滚动效果
const handleParallax = (event: MouseEvent) => {
  if (!isHomePage.value) return

  const mascots = document.querySelectorAll('.floating-mascot')
  mascots.forEach((mascot) => {
    // @ts-ignore
    const speed = parseFloat(mascot.getAttribute('data-speed') || '0.05')
    const x = (window.innerWidth - event.pageX * speed) / 50
    const y = (window.innerHeight - event.pageY * speed) / 50
    // @ts-ignore
    mascot.style.transform = `translateX(${x}px) translateY(${y}px)`
  })

  const bubbles = document.querySelectorAll('.bubble')
  bubbles.forEach((bubble, index) => {
    const speed = 0.02 + index * 0.01
    const x = (event.pageX * speed) / 30
    const y = (event.pageY * speed) / 30
    // @ts-ignore
    bubble.style.transform = `translate(${x}px, ${y}px)`
  })
}

// 滚动到顶部
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  })
}

//滚动时触发方法
onMounted(() => {
  //在主页时滑动触发
  if (route.path === '/front/home') {
    showFixedHeader.value = true
    window.addEventListener('scroll', windowScrollHandler)
  }

  // 添加视差滚动监听
  window.addEventListener('mousemove', handleParallax)

  // 监听滚动以显示/隐藏回到顶部按钮
  window.addEventListener('scroll', checkScrollPosition)
})

onUnmounted(() => {
  window.removeEventListener('scroll', windowScrollHandler)
  window.removeEventListener('mousemove', handleParallax)
  window.removeEventListener('scroll', checkScrollPosition)
})

const checkScrollPosition = () => {
  showBackToTop.value = window.scrollY > 300
}

const windowScrollHandler = () => {
  //获得滚动距离
  const scrollTop = window.scrollY
  //小于等于180px时显示透明导航栏
  //否则显示固定白底导航栏
  if (scrollTop <= 180) {
    showFixedHeader.value = true
  } else {
    showFixedHeader.value = false
  }
}
</script>

<style scoped lang="scss">
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  position: relative;
  overflow-x: hidden;
}

/* 当在个人中心页面时的特殊样式 */
.layout.kawaii-layout {
  &:has(~ .space-container) {
    .header-container,
    .header-fixed,
    .header {
      position: relative !important;
      background: transparent !important;
    }

    .content-wrapper {
      margin-top: 0 !important;
    }
  }
}

.header-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.main-content {
  flex: 1;
  margin-top: 64px;
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 64px);
  background-color: #fff;
}

/* 确保路由视图容器正确显示 */
.router-view-container {
  position: relative;
  min-height: calc(100vh - 64px);
  z-index: 2;
}

/* 添加响应式布局支持 */
@media screen and (max-width: 768px) {
  .main-content {
    margin-top: 56px;
    /* 移动端header高度可能更小 */
    min-height: calc(100vh - 56px);
  }

  .router-view-container {
    min-height: calc(100vh - 56px);
  }
}

/* 二次元风格变量 */
.kawaii-layout {
  --primary-color: #fe4ea4;
  --secondary-color: #ffcbe3;
  --tertiary-color: #b8c0ff;
  --accent-color: #ffd6ff;
  --border-color: rgba(254, 78, 164, 0.3);
  --light-bg: #fff8fb;
  --card-bg: rgba(255, 255, 255, 0.8);
  --text-color: #7c5479;
  --shadow-color: rgba(254, 78, 164, 0.2);
  --gradient-1: linear-gradient(135deg, #ffcbe3, #ffddf3);
  --gradient-2: linear-gradient(45deg, #fe4ea4, #ff9fcf);
  --gradient-3: linear-gradient(to right, #c4fcfc, #e5d9f2);
}

/* 装饰容器 */
.kawaii-decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* 角落装饰 */
.corner-decoration {
  position: fixed;
  width: 150px;
  height: 150px;
  z-index: 99;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.8;

  &.top-left {
    top: 0;
    left: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,0 C50,0 100,50 100,100 L0,100 L0,0 Z" fill="%23ffcbe3" fill-opacity="0.3" /></svg>');
  }

  &.top-right {
    top: 0;
    right: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M100,0 C50,0 0,50 0,100 L100,100 L100,0 Z" fill="%23fe4ea4" fill-opacity="0.2" /></svg>');
  }

  &.bottom-left {
    bottom: 0;
    left: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,100 C50,100 100,50 100,0 L0,0 L0,100 Z" fill="%23fe4ea4" fill-opacity="0.2" /></svg>');
  }

  &.bottom-right {
    bottom: 0;
    right: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M100,100 C50,100 0,50 0,0 L100,0 L100,100 Z" fill="%23ffcbe3" fill-opacity="0.3" /></svg>');
  }
}

/* 顶部彩带 */
.ribbon {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 80px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 80"><path d="M0,0 C100,40 200,0 300,40 L300,0 L0,0 Z" fill="%23ffcbe3" fill-opacity="0.3" /></svg>');
  background-size: cover;
  z-index: 98;
  pointer-events: none;
}

/* 气泡装饰 */
.bubble {
  position: fixed;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="25" cy="25" r="25" fill="%23ffd6ff" fill-opacity="0.5" /></svg>');
  background-size: contain;
  pointer-events: none;
  transition: transform 0.3s ease-out;

  &.bubble-1 {
    width: 40px;
    height: 40px;
    top: 150px;
    right: 15%;
    animation: float 7s ease-in-out infinite;
  }

  &.bubble-2 {
    width: 30px;
    height: 30px;
    top: 220px;
    left: 10%;
    animation: float 9s ease-in-out infinite 1s;
  }

  &.bubble-3 {
    width: 25px;
    height: 25px;
    top: 280px;
    right: 25%;
    animation: float 8s ease-in-out infinite 2s;
  }
}

/* 星星背景动画 */
.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: radial-gradient(
      2px 2px at 20px 30px,
      #ffffff,
      rgba(0, 0, 0, 0)
    ),
    radial-gradient(2px 2px at 40px 70px, #ffffff, rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 50px 160px, #ffffff, rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 90px 40px, #ffffff, rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 130px 80px, #ffffff, rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 160px 120px, #ffffff, rgba(0, 0, 0, 0));
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: twinkle 5s ease-in-out infinite;
  opacity: 0.5;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.8;
  }
}

/* 云朵 */
.clouds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  background-repeat: repeat-x, repeat-x;
  animation:
    drift 30s linear infinite,
    drift2 25s linear infinite;
}

@keyframes drift {
  from {
    background-position:
      0% 20%,
      50% 40%;
  }

  to {
    background-position:
      100% 20%,
      150% 40%;
  }
}

@keyframes drift2 {
  from {
    background-position:
      20% 10%,
      70% 30%;
  }

  to {
    background-position:
      120% 10%,
      170% 30%;
  }
}

@keyframes fall {
  to {
    top: 100%;
  }
}

@keyframes sway {
  from {
    transform: translateX(-10px) rotate(0deg);
  }

  to {
    transform: translateX(10px) rotate(360deg);
  }
}

/* 浮动装饰 */
.floating-mascots {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 浮动吉祥物 */
.floating-mascot {
  position: absolute;
  width: 120px;
  height: 120px;
  z-index: 2;
  pointer-events: none;
  animation: float 6s ease-in-out infinite;
  filter: drop-shadow(0 5px 15px rgba(254, 78, 164, 0.3));

  img {
    width: 100%;
    height: 100%;
  }

  &.left {
    top: 100px;
    left: 50px;
    animation-delay: 0s;
  }

  &.right {
    top: 150px;
    right: 50px;
    animation-delay: 2s;
  }
}

/* 可爱角色 */
.kawaii-character {
  position: absolute;
  width: 80px;
  height: 80px;
  z-index: 1;

  &.bottom-left {
    bottom: 300px;
    left: 50px;
    transform: rotate(-10deg);
    animation: peek 8s ease-in-out infinite;
  }

  &.bottom-right {
    bottom: 350px;
    right: 50px;
    transform: rotate(10deg) scaleX(-1);
    animation: peek 8s ease-in-out infinite 2s;
  }

  .kawaii-head {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--gradient-1);
    position: relative;
    box-shadow: 0 5px 15px rgba(254, 78, 164, 0.3);

    &:before,
    &:after {
      content: '';
      position: absolute;
      background: #333;
      border-radius: 50%;
      width: 10px;
      height: 10px;
      top: 30px;
    }

    &:before {
      left: 20px;
    }

    &:after {
      right: 20px;
    }

    &:after {
      width: 20px;
      height: 10px;
      border-radius: 10px;
      background: #ff9fcf;
      top: 50px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

@keyframes peek {
  0%,
  100% {
    transform: translateY(0) rotate(-10deg);
  }

  50% {
    transform: translateY(-20px) rotate(-5deg);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

.kawaii-background {
  position: absolute;
  width: 100%;
  height: 100%;
  min-height: 180px;
  background: linear-gradient(to bottom, #ffddf3, #fff8fb);
  overflow: hidden;
  z-index: -1;
}

/* 头部样式 */
.header {
  position: fixed;
  width: 100%;
  margin: 0 auto;
  z-index: 100;
  transition: all 0.3s ease;
  overflow: visible;
}

/* 内容区域样式 */
.content-wrapper {
  position: relative;
  z-index: 1;
  background-color: var(--light-bg);
  margin-top: 65px;

  &.homepage-content {
    border-radius: 30px 30px 0 0;
    box-shadow: 0 -4px 20px rgba(254, 78, 164, 0.1);
  }

  &.other-page-content {
    background-color: #fff;
    border-radius: 0;
    box-shadow: none;
  }
}

/* 内容区域标题 */
.content-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 10px;
  position: relative;

  &-decoration {
    width: 100px;
    height: 4px;
    background: var(--gradient-2);
    border-radius: 4px;
    position: relative;

    &.left {
      margin-right: 15px;
      transform: translateX(10px);
    }

    &.right {
      margin-left: 15px;
      transform: translateX(-10px);
    }

    &:before {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--gradient-2);
      top: -3px;
    }

    &.left:before {
      left: 0;
    }

    &.right:before {
      right: 0;
    }
  }

  &-title {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-color);
    text-shadow: 0 2px 4px rgba(254, 78, 164, 0.2);
    letter-spacing: 2px;
  }
}

.content {
  flex: 1; // 让内容区域占据剩余空间
  background-color: transparent;
  margin: 0 auto;
  min-height: calc(100vh - 180px);
  max-width: 2000px;
  min-width: 1250px;
  padding: 0 20px 20px;
  border-radius: 30px 30px 0 0;
  position: relative;
}

/* 固定头部 */
.header-fixed {
  position: fixed;
  width: 100%;
  z-index: 100;
  top: 0;
  background: #fff;
  height: 64px;
  box-shadow: 0 4px 15px rgba(254, 78, 164, 0.15);
  transition: all 0.3s ease;
  overflow: visible;
}

/* 侧边装饰 */
.side-decorations {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.side-item {
  width: 40px;
  height: 40px;
  background: var(--card-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px var(--shadow-color);
  cursor: pointer;
  transition: all 0.3s ease;
  animation: pulse 2s infinite;

  &:hover {
    transform: scale(1.2);
  }

  &-1 {
    animation-delay: 0s;
  }

  &-2 {
    animation-delay: 0.5s;
  }

  &-3 {
    animation-delay: 1s;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.side-icon {
  width: 20px;
  height: 20px;

  &.heart {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" fill="%23fe4ea4" /></svg>');
    background-size: contain;
  }

  &.star {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" fill="%23fe4ea4" /></svg>');
    background-size: contain;
  }

  &.cat {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,8L10.67,8.09C9.81,7.07 7.4,4.5 5,4.5C5,4.5 3.03,7.46 4.96,11.41C4.41,12.24 4.07,12.67 4,13.66L2.07,13.95L2.28,14.93L4.04,14.67L4.18,15.38L2.61,16.32L3.08,17.21L4.53,16.32C5.68,18.76 8.59,20 12,20C15.41,20 18.32,18.76 19.47,16.32L20.92,17.21L21.39,16.32L19.82,15.38L19.96,14.67L21.72,14.93L21.93,13.95L20,13.66C19.93,12.67 19.59,12.24 19.04,11.41C20.97,7.46 19,4.5 19,4.5C16.6,4.5 14.19,7.07 13.33,8.09L12,8Z" fill="%23fe4ea4" /></svg>');
    background-size: contain;
  }
}

/* 回到顶部按钮 */
.back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 60px;
  height: 60px;
  background: var(--gradient-2);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 99;
  box-shadow: 0 4px 15px rgba(254, 78, 164, 0.3);

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(254, 78, 164, 0.4);

    .back-to-top-text {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .back-to-top-icon {
    color: white;
    font-size: 24px;
    font-weight: bold;
    animation: bounce 2s infinite;
  }

  .back-to-top-text {
    position: absolute;
    bottom: -30px;
    white-space: nowrap;
    background: var(--primary-color);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 14px;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.3s ease;
    box-shadow: 0 3px 8px rgba(254, 78, 164, 0.3);
  }
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }

  60% {
    transform: translateY(-5px);
  }
}
</style>
